<template>
<div>
  姓 <input ref="id1" name="prefixName" v-model="prefixName"><br>
  名 <input ref="id2" name="suffixName" v-model="suffixName"><br>
  <button @click="m1">点击</button>
  <button @click="m2">点击2</button>
</div>
</template>

<script>
import user from "../api/user";
// 导出这个组件
export default {
  name: "StudentInfo", //组件的名字，唯一标识
  data(){ // 写成函数的形式，防止变量的引用传递，
    return{
      prefixName:"",
      suffixName:""
    }
  },
  activated(){

    console.log('------activated-----')
  },
  deactivated(){
    console.log('-----deactivated------')
  } ,
  methods:{

     async m1() {
       // alert(this.prefixName + this.suffixName)
       const res = await user.getUserPage({gradeId: "1"});
       console.log(res)

     },
    m2(){
      console.log(this.$refs.id1)
      console.log(this.$refs.id2)
      let id = this.$route.params.id;
      console.log(id)
    },

    m3(){
      let id = this.$route.params.id;
      console.log(id)
    }
  }
}
</script>

<style scoped>

</style>